<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="assets/css/app.css">
</head>
<body class="loginbody">
<!-- 导航栏 -->
<div class="nav">
    <!-- 左边 -->
    <div class="nav-left">
        <img src="assets\i\app-icon72x72@2x.png" alt="">
        <span class="name">图片管理器</span>
        <div class="QQnum">联系方式:QQ-1415504849&ensp;</div>
    </div>
</div>
<!-- 登录部分 -->
<div id="login-container">
    <div id="login-form">
        <h2 id="denglu">登&ensp;&ensp;录</h2>
        <marquee style="color: rgb(179, 0, 255);" direction=scroll>&hearts;欢迎来到图片服务器&hearts;</marquee>
        <div class="login-row">
            <span>用户名</span>
            <input type="text" id="username" placeholder="请输入用户名">
        </div>
        <div class="login-row">
            <span>密&ensp;&ensp;码</span>
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        <!-- 用div占据一行，显示报错信息：设置为红色字体 -->
        <div id="error" style="color: red; height: 1.2em;"></div>
        <div class="login-row">
            <input type="submit" id="submit" value="登录">
        </div>
        <div>
            <input type="submit" id="submit2" value="注册">
        </div>
    </div>
    
</div>
<div>
    <footer class="blog-footer2">
        <div class="blog-text-center">© Copyright by 郝宇鑫&ensp;&ensp; &ensp;&ensp;请正确使用图片服务器</div>
    </footer>
</div>
    
</body>

<script src="js/util.js"></script>
<script>
    //登录，是点击登录按钮，开始执行
    var btn = document.querySelector("#submit");
    var rgt = document.querySelector("#submit2");
    var username = document.querySelector("#username");
    var password = document.querySelector("#password");
    var error = document.querySelector("#error");

    rgt.onclick = function() {
        location.href = "register.html";
    }

    btn.onclick = function(){
        if(!username.value){
            // alert("账号不能为空")
            error.innerHTML = "账号不能为空";
            return;
        }
        if(!password.value){
            // alert("密码不能为空")
            error.innerHTML = "密码不能为空";
            return;
        }
        error.innerHTML = '';
        //发送ajax请求
        ajax({
            method: "POST",
            url: "login",
            contentType: "application/json",
            body: JSON.stringify({
                username: username.value,
                password: password.value,
            }),
            callback: function(status, responseText){
                var json = handleResponse(status, responseText);
                if(!json) return;
                if(json.ok){
                    location.href = "img_list.html";
                }else{
                    error.innerHTML = json.error;
                }
            }
        })
    }
</script>

</html>